import React,{ Component } from 'react';
import { connect } from 'react-redux'
import { CSSTransition } from 'react-transition-group';
import { Link } from 'react-router-dom'
import {
    HeaderWrapper,
    Logo,
    Nav,
    NavItem,
    NavSearch,
    Addition,
    Button,
    SearchWrapper,
    SearchInfo,
    SearchInfoTiTle,
    SearchInfoSwitch,
    SearchInfoItem,
    SearchInfoList,
    SearchInfoTip
} from './style'
import { actionCreaters }  from './store'
import { actionCreaters as loginactionCreaters }  from '../../pages/login/store'


class Header extends Component{

    getLiatArea=()=>{
            const {focused,list,page,mouseIn,totalPage,handleMouseEnter,handleMouseLeave,handleChangeList} =this.props
            const newList=list.toJS();
            const pageList=[];
            if(newList.length){
                for( let i=(page-1)*10; i<page*10 && i< newList.length; i++ ){
                    pageList.push(
                        <SearchInfoItem key= {newList[i]} > {newList[i]} </SearchInfoItem>
                    )
                }
            }
           
        
        
        if(focused || mouseIn){
            return(
                <div>
                    <SearchInfoTip></SearchInfoTip>
                    <SearchInfo
                        onMouseEnter={handleMouseEnter}
                        onMouseLeave={handleMouseLeave}
                    >
                        <SearchInfoTiTle>
                            热门搜索
                            <SearchInfoSwitch onClick={()=>{handleChangeList(page,totalPage,this.spinIcon)}}>
                                <i ref={(icon)=>{this.spinIcon=icon}} className="iconfont spin">
                                    &#xe851;
                                </i>
                                换一批
                            </SearchInfoSwitch>
                        </SearchInfoTiTle>
                        <SearchInfoList>
                            {pageList}
                        </SearchInfoList>
                    </SearchInfo>
                </div>
            )  
        }else{
            return null
        }
    }

    render(){
        const {focused,list,page,handleInputFocus,handleInputBlur,login,logout} =this.props;
        return(
                <HeaderWrapper>
                    <Logo/>
                    <Nav>
                        <NavItem className="left active">首页</NavItem>
                        <NavItem className="left">下载App</NavItem>
                            {  login?
                                   <NavItem className="right" onClick={logout}>退出</NavItem> :
                                   <Link to = "/login"><NavItem className="right" >登录</NavItem></Link>
                            }

                        <NavItem className="right">
                            <i className="iconfont ic-mot">&#xe636;</i>
                        </NavItem>

                        <SearchWrapper>
                            <CSSTransition
                                in={focused}
                                timeout={300}
                                classNames="slide"
                            >
                                <NavSearch
                                    className={focused ? 'focused' : ''}
                                    onFocus={handleInputFocus}
                                    onBlur={handleInputBlur}
                                />
                            </CSSTransition>
                            <i className={focused ? 'iconfont focused searchicon' : 'iconfont searchicon'}>
                                &#xe653;
                            </i>
                            {this.getLiatArea(focused,list,page)}
                        </SearchWrapper>
                    </Nav>
                    <Addition>
                    <Link to = "/write">
                        <Button className="writting">
                            <i className="iconfont ic-write">&#xe60e;</i>
                            写文章
                        </Button>
                    </Link>
                        <Button className="reg">注册</Button>
                    </Addition>
                </HeaderWrapper>
        )
    }
}


const mapStateToProps=(state)=>{
    return{
         //immutabled对象的get方法
        focused:state.getIn(['header','focused']),
        list:state.getIn(['header','list']),
        page:state.getIn(['header','page']),
        mouseIn:state.getIn(['header','mouseIn']),
        totalPage:state.getIn(['header','totalPage']),
        login:state.get('login').get('login')
    }
};

const mapDispatchToProps =(dispatch)=>{
    return{
        handleInputFocus(){
            dispatch(actionCreaters.getList());
            dispatch(actionCreaters.searchFocus())
        },

        handleInputBlur(){
            dispatch(actionCreaters.searchBlur())
        },

        handleMouseEnter(){
            dispatch(actionCreaters.mouseEnter())
        },

        handleMouseLeave(){
            dispatch(actionCreaters.mouseLeave())
        },

        handleChangeList(page,totalPage,spin){
            //让换一换部分的转圈
            let originAngle=spin.style.transform.replace(/[^0-9]/ig,''); //获取到transform里面的数字部分
            if(originAngle) {
                originAngle=parseInt(originAngle,10); //转成整型函数
            }else{
                originAngle=0; //第一次时获取到transform里面没有值，就设置为0
            }
            spin.style.transform='rotate('+(originAngle+360)+'deg)'; //每次转一圈，

            if(page<totalPage){
                dispatch(actionCreaters.changeList(page+1))
            }else{
                dispatch(actionCreaters.changeList(1))
            }
        },

        logout(){
            dispatch(loginactionCreaters.logout())
        }
    }
}

export default connect(mapStateToProps,mapDispatchToProps)(Header)